import React, { useState, useEffect } from "react";
import {
  LockOutlined,
  UserOutlined,
  LogoutOutlined,
  SearchOutlined,
} from "@ant-design/icons";
import { Layout, Menu, theme, Dropdown, Tooltip, Avatar, Button } from "antd";
import { Outlet, useLocation, history, useOutletContext } from "umi";
import { doFetch } from "@/utils/doFetch";
import Fade from "react-reveal/Fade";
const { Header, Content, Footer, Sider } = Layout;

function Headers({ currentUser, children, broken }) {
  const {
    token: { colorBgContainer, colorBorder },
  } = theme.useToken();
  const location = useLocation();

  console.log(currentUser);

  const items = [
    {
      key: "4",
      danger: true,
      label: "退出登录",
      icon: <LogoutOutlined />,
    },
  ];

  return (
    <Header
      style={{
        padding: 0,
        background: colorBgContainer,
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        marginTop: 10,
      }}
    >
      <div style={{ marginLeft: 24 }} className="centerl">
        {broken && children}
        <Button
          icon={<SearchOutlined></SearchOutlined>}
          type="text"
          shape="circle"
        ></Button>
      </div>

      <Dropdown
        menu={{
          items,
          onClick: (e) => {
            if (e.key === "4") {
              doFetch({ url: "/webtool/logout", params: {} }).then((res) => {
                localStorage.removeItem("TOKENES");
                history.push("/user/login");
              });
            }
          },
        }}
        placement="bottom"
      >
        <div style={{ marginRight: 112, gap: 12 }} className="centerl">
          <Avatar
            size={"large"}
            src={currentUser?.head_image ?? "./user.jpg"}
            style={{ backgroundColor: colorBorder }}
          ></Avatar>
          <b>{currentUser?.user_name ?? "-"}</b>
        </div>
      </Dropdown>
    </Header>
  );
}

export default Headers;
